<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- 条件搜索 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="5" :sm="24">
              <a-form-item label="姓名">
                <a-input v-model="queryParam.deptName" placeholder="请输入" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="电话">
                <a-input v-model="queryParam.deptName" placeholder="请输入" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
                <a-button style="margin-left: 8px" type="primary" @click="getAll"><a-icon
                    type="redo" />同步全部组织架构</a-button>
                <a-button style="margin-left: 8px" type="primary" @click="getDepList"><a-icon
                    type="redo" />仅同步部门列表</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 操作 -->
      <div class="table-operations">
        <table-setting :style="{ float: 'right' }" :table-size.sync="tableSize" v-model="columns"
          :refresh-loading="loading" @refresh="getList" />
      </div>
      <!-- 数据展示 -->
      <a-table :loading="loading" :size="tableSize" rowKey="name" :columns="columns" :data-source="list"
        :pagination="false" :bordered="tableBordered">
        <span slot="avatar" slot-scope="text, record">
          <base-image v-if="record.avatar" :src="record.avatar"></base-image>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>

import { getSyNcOrganizational, getDepartmentAll, getDepartmentList } from '@/api/organization/index'
import { tableMixin } from '@/store/table-mixin'
import baseImage from '@/components/image'
export default {
  name: 'Dept',
  components: {
    baseImage
  },
  mixins: [tableMixin],
  dicts: ['sys_normal_disable'],
  data() {
    return {
      list: [],
      loading: false,
      queryParam: {
        deptName: undefined,
        status: undefined
      },
      columns: [
        {
          title: '部门名称',
          dataIndex: 'name',
          key: 'name',
          width: 500
        },
        {
          title: '头像',
          dataIndex: 'avatar',
          key: 'avatar',
          align: 'center',
          scopedSlots: { customRender: 'avatar' },
          width: 200
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          key: 'mobile',
          align: 'center'
        },
        // {
        //   title: '状态',
        //   dataIndex: 'status',
        //   scopedSlots: { customRender: 'status' },
        //   align: 'center'
        // },
        // {
        //   title: '创建时间',
        //   dataIndex: 'createTime',
        //   ellipsis: true,
        //   scopedSlots: { customRender: 'createTime' },
        //   align: 'center'
        // },
      ]
    }
  },
  filters: {
  },
  created() {
    this.getList()
  },
  computed: {
  },
  watch: {
  },
  methods: {
    /** 查询部门列表 */
    getList() {
      this.loading = true
      getSyNcOrganizational(this.queryParam).then(response => {
        response.data.forEach((data) => {
          data.children = data.userList
        })
        this.list = this.handleTreeData(response.data, 'dept_id', 'parent_id', 'children', '1')
        // this.list = response.data
        this.loading = false
      }
      )
    },
    // 主动同步全部组织架构成员信息
    getAll() {
      getDepartmentAll().then(res => {
        if (res.data) {
          this.getList()
          this.$message.success('同步成功')
        } else {
          this.$message.error('同步失败')
        }
      })
    },
    handleTreeData(data, id, parentId, children, rootId) {
      id = id || 'id'
      parentId = parentId || 'parentId'
      children = children || 'children'
      rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
      // 对源数据深度克隆
      const cloneData = JSON.parse(JSON.stringify(data))
      // 循环所有项
      const treeData = cloneData.filter(father => {
        var branchArr = cloneData.filter(child => {
          // 返回每一项的子级数组
          return father[id] === child[parentId]
        })
        if (branchArr.length > 0) {
          father.children = [...branchArr,...father.children]
        } else {
          // father.children = ''
        }
        // 返回第一层
        return father[parentId] === rootId
      })
      console.log(treeData);
      return treeData !== '' ? treeData : data
    },
    // 主动同步组织架构内部门列表
    getDepList() {
      getDepartmentList().then(res => {
        if (res.data) {
          this.getList()
          this.$message.success('同步成功')
        } else {
          this.$message.error('同步失败')
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParam = {
        deptName: undefined,
        status: undefined
      }
      this.handleQuery()
    },
  }
}
</script>
